﻿@layout HomeLayout
@page "/"
@page "/index"
@page "/home"

<section class="home-section">
    <div class="welcome container">
        <div class="form-inline">
            <div class="row">
                <div class="col-12 col-lg-6">
                    <div class="welcome-header">
                        <h1 class="mb-3">
                            Bootstrap of Blazor
                        </h1>
                        <h4>
                            Bootstrap 风格的 Blazor UI 组件库
                        </h4>
                        <div>基于 <code>Bootstrap</code> 样式库精心打造，并且额外增加了 70 多种常用的组件，为您快速开发项目带来非一般的感觉</div>
                        <div class="welcome-body">
                            致力于打造全网<span @ref="TypeElement" class="typed"></span><span class="typed-cursor">|</span>
                            <div>最好玩的组件库</div>
                        </div>
                    </div>
                    <div class="welcome-footer">
                        <div class="d-flex flex-wrap">
                            <span role="alert" class="tag alert fade show alert-primary" data-toggle="tooltip" title="Tree 组件">
                                树形组件
                            </span>
                            <span role="alert" class="tag alert fade show alert-success" data-toggle="tooltip" title="Menu 组件">
                                菜单组件
                            </span>
                            <span role="alert" class="tag alert fade show alert-warning" data-toggle="tooltip" title="Tab Tag Alert 组件">
                                标签组件
                            </span>
                            <span role="alert" class="tag alert fade show alert-secondary" data-toggle="tooltip" title="Table 组件">
                                表格组件
                            </span>
                        </div>
                        <div class="d-flex flex-wrap">
                            <span role="alert" class="tag alert fade show alert-danger" data-toggle="tooltip" title="Layout Split 组件">
                                布局组件
                            </span>
                            <span role="alert" class="tag alert fade show alert-info" data-toggle="tooltip" title="Dialog Message Toast 组件">
                                通知组件
                            </span>
                            <span role="alert" class="tag alert fade show alert-dark" data-toggle="tooltip" title="Upload 组件">
                                上传组件
                            </span>
                            <span role="alert" class="tag alert fade show alert-success" data-toggle="tooltip" title="Swith Toogle 组件">
                                开关组件
                            </span>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
                            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
                            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
                            <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="bar">
                                    <div class="carousel-img">
                                        <img src="_content/BootstrapBlazor.Shared/images/bar.gif" />
                                    </div>
                                    <div class="carousel-caption">
                                        <h5>Chart 图表组件</h5>
                                        <p>提供常用的多种图表组件</p>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="bar">
                                    <div class="carousel-img">
                                        <img src="_content/BootstrapBlazor.Shared/images/dought.gif" />
                                    </div>
                                    <div class="carousel-caption">
                                        <h5>Chart 图标组件</h5>
                                        <p>多维度数据对比</p>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="bar">
                                    <div class="carousel-img">
                                        <img src="_content/BootstrapBlazor.Shared/images/table.png" />
                                    </div>
                                    <div class="carousel-caption">
                                        <h5>全功能表格组件</h5>
                                        <p>具备增删改查搜、分页、排序所有功能</p>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="bar">
                                    <div class="carousel-img">
                                        <img src="_content/BootstrapBlazor.Shared/images/timeline.png" />
                                    </div>
                                    <div class="carousel-caption">
                                        <h5>超强时间线功能</h5>
                                        <p>自定义节点显示任意组件</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button"
                           data-slide="prev">
                            <i class="fa fa-angle-left"></i>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleCaptions" role="button"
                           data-slide="next">
                            <i class="fa fa-angle-right"></i>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="intro container">
        <div class="form-inline">
            <div class="row">
                <div class="form-group col-12 col-sm-6 col-md-4">
                    <div class="card border-success">
                        <p class="d-none d-sm-block">
                            <img src="_content/BootstrapBlazor.Shared/images/components.svg" alt="components" />
                        </p>
                        <h3>50+ 组件</h3>
                        <div>本套组件库包含超过 50 多个组件，从简单的按钮到复杂的整页面级别的组件</div>
                    </div>
                </div>
                <div class="form-group col-12 col-sm-6 col-md-4">
                    <div class="card border-primary">
                        <p class="d-none d-sm-block">
                            <img src="_content/BootstrapBlazor.Shared/images/performance.svg" alt="components" />
                        </p>
                        <h3>性能</h3>
                        <div>
                            每个控件都经过微调，优化父子组件之间刷新逻辑，避免多次循环更新
                        </div>
                    </div>
                </div>
                <div class="form-group col-12 col-sm-6 col-md-4">
                    <div class="card border-info">
                        <p class="d-none d-sm-block">
                            <img src="_content/BootstrapBlazor.Shared/images/ease-of-use.svg" alt="components" />
                        </p>
                        <h3>简单易用</h3>
                        <div>轻松掌握组件使用方法，快速将 BootstrapBlazor 控件融入到项目中</div>
                    </div>
                </div>
                <div class="form-group col-12 col-sm-6 col-md-4">
                    <div class="card border-danger">
                        <p class="d-none d-sm-block">
                            <img src="_content/BootstrapBlazor.Shared/images/hassel-free-licensing.svg" alt="components" />
                        </p>
                        <h3>免费开源</h3>
                        <div>简单、直接、免费使用、无依赖组件，依赖 jQuery Bootstrap 均已内置</div>
                    </div>
                </div>
                <div class="form-group col-12 col-sm-6 col-md-4">
                    <div class="card border-warning">
                        <p class="d-none d-sm-block">
                            <img src="_content/BootstrapBlazor.Shared/images/demo-and-training.svg" alt="components" />
                        </p>
                        <h3>演示与示例</h3>
                        <div>详细文档与在线演示，功能设置简单，直接拷贝代码开箱即用</div>
                    </div>
                </div>
                <div class="form-group col-12 col-sm-6 col-md-4">
                    <div class="card border-secondary">
                        <p class="d-none d-sm-block">
                            <img src="_content/BootstrapBlazor.Shared/images/frequent-updates.svg" alt="components" />
                        </p>
                        <h3>持续更新</h3>
                        <div>码云平台托管开源，永不闭源，持续更新，及时响应问题与反馈</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="donate">
        <h3>捐助</h3>
        <h5 class="d-none d-sm-block mb-3">扫码捐助请作者喝一杯咖啡</h5>
        <img class="barcode" src="https://gitee.com/LongbowEnterprise/Pictures/raw/master/WeChat/BarCode@2x.png" />
    </div>
</section>
